<template>
    <div id="#app">
        <div class="box1"><router-link to="/"></router-link><span>手链</span></div>
        <div class="box2">
      <img src="../../public/img/braceiet.jpg" alt="" />
    </div>
    <div class="box3">
      <span></span>
      <p>手链</p>
    </div>
    <div class="box4">
      <div class="left" v-for="(item, index) in ring" :key="index">
        <img :src="item.src" @click="tiao(ring, index)" alt="" />
        <p>{{ item.title }}</p>
        <p class="p1">
          <span>￥{{ item.money }}</span
          ><span class="iconfont icon-jiarugouwuche"></span>
        </p>
      </div>
    </div>
    </div>
</template>

<style lang="less" scoped>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
.box1 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 53px;
  border-bottom: 1px solid #d8d8d8;
  /*position: relative;*/
  background: #fff;
  span {
    color: #000;
  }
  a {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: url("../../public/img/arrow-left.png") no-repeat center center;
    background-size: 50%;
  }
}
.box2 {
    margin-top: 50px;
  width: 100%;
  img {
    width: 100%;
  }
}
.box3 {
  width: 100%;
  span {
    width: 6px;
    height: 17px;
    background: #cc0000;
  }
  p {
    padding-left: 10px;
  }
    margin: 6px 0;
    padding-left: 10px;
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    font-size: 17px;
    border-bottom: 10px solid #f2f2f2;
}
.box4 {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    width: 49%;
  }
  .left {
    img {
      width: 100%;
    }
    .p1 {
      display: flex;
      justify-content: space-between;
      .iconfont {
        font-size: 18px;
      }
    }
    p {
      margin: 5px 0;
      padding: 0 0 0 10px;
      color: #000000;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 170px;
    }
    span {
      color: #cc0000;
    }
  }
}
</style>
    
<script>
export default {
    data(){
        return {
            //手链里面的数据
      ring: [
        // {
        //     "src": "img/ff.jpg",
        //     "title": "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女 玫瑰金",
        //     "money": "2998"
        // },
        // {
        //     "src": "img/gg.jpg",
        //     "title": "Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰",
        //     "money": "4140"
        // },
        // {
        //     "src": "img/ee.jpg",
        //     "title": "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
        //     "money": "3380"
        // },
        // {
        //     "src": "img/dd.jpg",
        //     "title": "Leysen月桂女神钻石吊坠女 唐嫣同款18K金钻石项链 黄金",
        //     "money": "5999"
        // }
      ],
        }
    },
    methods: {
    tiao(arr, index1) {
      //形参
      var obj = {};

      arr.some((item, index) => {
        if (index1 == index) {
          obj = item;
          //把数据传到后台 防止刷新详情页面内容不存在
          localStorage.setItem("obj1", JSON.stringify(obj)); //对象转字符串
        }
      });
      //传数据
      this.$router.push({
        name: "Hui",
        params: { obj1: obj },
      });
    },
  },
  mounted(){
     this.$axios.get('http://47.111.93.194:3003/braceiet').then((data)=>{
       console.log(data);
       this.ring=data.data.ring;
     })
  },
}
</script>